<template>
	<view class="">
		<view class="tips">请确保您填写资料的准确性，以便我方和您取得联系！</view>
		<view class="address-form">
			<form @submit="formSubmit">
				<view class="label-input">
					<text>所在地</text>
					<region-picker style="width:100%" @change="region_change" :value="[0,0,0]">
						<view class="region">
							{{address?address:'省、市、区(必选)'}}
							<image src="@/static/Chevron.png" mode=""></image>
						</view>
					</region-picker>
				</view>
				<view class="label-input">
					<text>所属行业</text>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index || index === 0">{{
              array[index]
            }}</view>
						<view v-else class="">请选择</view>
					</picker>
					<image src="@/static/Chevron.png" mode=""></image>
				</view>
				<view class="label-input isMargin">
					<text>融资金额</text>
					<input placeholder-style="font-size:28rpx" maxlength="11" type="number"
						@keyup.native="adjustMaxLen($event)" v-model="financingAmount" placeholder="融资金额(必填)" />
					<text style="width: 140rpx">万元</text>
				</view>
				<view class="label-input">
					<text>融资期限</text>
					<input placeholder-style="font-size:28rpx" maxlength="16" v-model="financingPeriod"
						placeholder="请输入(必填)" />
				</view>
				<view class="label-input">
					<text>融资方式</text>
					<checkbox-group @change="checkboxChange" style="flex: auto">
						<checkbox value="1" :checked="financingMethod.includes('1')">股权融资</checkbox>
						<checkbox value="2" :checked="financingMethod.includes('2')">债权融资</checkbox>
						<checkbox value="3" :checked="financingMethod.includes('3')">其他</checkbox>
					</checkbox-group>
				</view>

				<view class="label-input">
					<text class="area">退出机制</text>
					<textarea auto-height style="margin: 0 16rpx" maxlength="200"
						@keyup="exitRemark = exitRemark.replace(/\s+/g, '')" v-model="exitRemark"
						placeholder="请描述(必填)" />
				</view>

				<view class="label-input isMargin">
					<text>联系人</text>
					<input placeholder-style="font-size:28rpx" maxlength="16"
						@keyup="realName = realName.replace(/\s+/g, '')" v-model="realName" placeholder="姓名(必填)" />
				</view>
				<view class="label-input">
					<text>联系方式</text>
					<input placeholder-style="font-size:28rpx" maxlength="11" type="number"
						@keyup="contactNumber = contactNumber.replace(/\s+/g, '')" v-model="contactNumber"
						placeholder="联系电话(必填)" />
				</view>

				<view class="label-input isMargin" @click="checkVip">
					<text>是否会员</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="member"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>
				<view class="label-input isMargin">
					<text>我的邀请人</text>
					<input placeholder-style="font-size:28rpx" maxlength="16"
						@keyup="inviterRealName = inviterRealName.replace(/\s+/g, '')" v-model="inviterRealName"
						placeholder="姓名" />
				</view>
				<view class="label-input isMargin">
					<text class="area">备注</text>
					<textarea auto-height style="margin: 0 16rpx" maxlength="200"
						@keyup="applyRemark = applyRemark.replace(/\s+/g, '')" v-model="applyRemark"
						placeholder="请输入" />
				</view>
			</form>
		</view>
		<view class="footer">
			<button type="primary" @click="submit" :style="{ background: inputAll ? '#0B4E9E' : '#CCCCCC' }">
				确定
			</button>
		</view>
	</view>
</template>

<script>
	import api from "api/modules/haveProject.js";
	import regionPicker from "@/components/region-picker/region-picker.vue"
	export default {
		name: "HaveCapital",
		components: {
			regionPicker
		},
		data() {
			return {
				index: "",
				array: [
					"餐饮",
					"消费",
					"零售",
					"物流",
					"硬件",
					"科技",
					"教育",
					"产业园",
					"电子商务",
					"健康医疗",
					"文创文旅",
					"其他",
				],
				addressShow: false,
				address: "", // 地址拼接
				applyRemark: "",
				cityName: "",
				contactNumber: "",
				districtName: "",
				exitRemark: "",
				financingAmount: "",
				financingMethod: [],
				financingPeriod: "",
				inviterRealName: "",
				member: "",
				projectIndustry: "",
				provinceName: "",
				realName: "",
			};
		},
		mounted() {},
		computed: {
			inputAll: function() {
				if (
					this.address &&
					this.contactNumber &&
					this.exitRemark &&
					this.financingAmount &&
					this.financingPeriod &&
					this.financingMethod.length &&
					this.projectIndustry &&
					this.member &&
					this.realName
				) {
					return true;
				}
				return false;
			},
		},
		methods: {
			region_change(val) {
				if (val) {
					this.provinceName = val.detail.value[0]
					this.cityName = val.detail.value[1]
					this.districtName = val.detail.value[2]
					this.address = this.provinceName + '-' + this.cityName + '-' + this.districtName
				}
			},
			bindPickerChange(val) {
				this.index = val.detail.value;
				this.projectIndustry = this.array[val.detail.value];
			},
			checkboxChange(val) {
				this.financingMethod = val.detail.value;
			},
			adjustMaxLen(el, maxlength = 8) {
				el.target.value = el.target.value.replace(/^(\d+)\.(\d\d).*$/, "$1.$2"); //只能输入2个小数
				el.target.value = el.target.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符，只能输入正整数
				el.target.value = el.target.value.replace(/^\./g, ""); //验证第一个字符是数字而不是其他的
				el.target.value = el.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				el.target.value = el.target.value
					.replace(".", "$#$")
					.replace(/\./g, "")
					.replace("$#$", "."); //保证.只出现一次，而不能出现两次以上

				if (el.target.value.length > maxlength) {
					if (!el.target.value.includes(".")) {
						this.financingAmount = el.target.value.slice(0, 8);
					} else {
						this.financingAmount = el.target.value.slice(0, 11);
					}
				} else {
					if (el.target.value.includes(".")) {
						el.target.value = el.target.value.slice(0, el.target.value.length);
						this.financingAmount = el.target.value.slice(
							0,
							el.target.value.length
						);
					}
				}
			},
			checkVip() {
				uni.showActionSheet({
					itemList: ["是", "否"],
					success: (res) => {
						this.member = res.tapIndex == 0 ? "是" : "否";
					},
				});
			},
			submit() {
				if (!this.inputAll) {
					return;
				} else {
					if (!/^1([3456789])\d{9}$/.test(this.contactNumber)) {
						uni.showToast({
							title: "联系方式错误",
							icon: "none",
						});
						return;
					}
					api
						.supplyProject({
							applyRemark: this.applyRemark,
							cityName: this.cityName,
							contactNumber: this.contactNumber,
							districtName: this.districtName,
							exitRemark: this.exitRemark,
							financingAmount: this.financingAmount,
							financingMethod: this.financingMethod,
							financingPeriod: this.financingPeriod,
							inviterRealName: this.inviterRealName,
							member: this.member == "是" ? true : false,
							projectIndustry: this.projectIndustry,
							provinceName: this.provinceName,
							realName: this.realName,
						})
						.then((res) => {
							(this.address = ""), // 地址拼接
							(this.applyRemark = ""),
							(this.cityName = ""),
							(this.contactNumber = ""),
							(this.districtName = ""),
							(this.exitRemark = ""),
							(this.financingAmount = ""),
							(this.financingMethod = []),
							(this.financingPeriod = ""),
							(this.inviterRealName = ""),
							(this.member = ""),
							(this.projectIndustry = ""),
							(this.provinceName = ""),
							(this.realName = ""),
							uni.showToast({
								title: "申请成功",
								icon: "none",
							});
						});
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	/deep/ .uni-checkbox-input {
		width: 24rpx;
		height: 24rpx;
	}

	/deep/.uni-checkbox-wrapper {
		font-size: 28rpx;
		color: #666666;
		margin-right: 20rpx;
	}

	/deep/ .uni-checkbox-input-checked {
		color: #ffffff !important;
		background-color: #007aff;
		width: 24rpx;
		height: 24rpx;

		&::before {
			font-size: 24rpx !important;
		}
	}

	.region {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tips {
		padding: 20rpx 24rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.footer {
		margin: 24rpx 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;

		button {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;

			&::after {
				border: 0;
			}
		}
	}
</style>
